<template>
  <div class="">
    <h4>watch</h4>
    <button @click="obj.num++">改变num</button>
    <h4>{{ obj.num }}</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 10,
      obj: {
        num: 10,
      },
    };
  },

  methods: {},
  watch: {
    // num(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    // 这样一个函数是watch的简写,完整写法如下
    obj: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      //执行函数
      immediate: true,
      //立刻监听，默认是false，进入页面的时候要不要立刻监听
      deep: true,
      //深度监听 针对数组和对象,开启深度监听才能监听到对象内部数据的变化
    },
    //如果既不需要进入页面就监听 也不需要深度监听 就可以简写handler为一个函数
  },
};
</script>

<style lang="scss"></style>
